<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>项目报表</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/report.css">
</head>

<body>
    <div class="top-navigation">
        <a href=""><img class="arrow" src="img/arrow.png" alt="图片加载中"></a>
        <h3>项目管理</h3>
        <img class="search" src="img/search.png" alt="图片加载中">
    </div>
    <!-- 底部搜索界面模态框 -->
    <div class="fades" hidden></div>
    <div class="bottom-modal" hidden>
        <div class="modal-wrapper">
            <div class="modals-title">
                <p style="opacity: 0;"></p>
                <h3>条件搜索</h3>
                <h5 class="clearForm">清空</h5>
            </div>
            <form class="forms">
                <input type="text" placeholder="请输入搜索内容">
                <div class="input-container">
                    <div>
                        <h3>组别</h3>
                        <select name="" id="" placeholder="点击选择">
                            <option value="">点击选择</option>
                            <option value="">1组</option>
                            <option value="">2组</option>
                        </select>
                    </div>
                    <div>
                        <h3>单位</h3>
                        <select name="" id="" placeholder="点击选择">
                            <option value="">点击选择</option>
                            <option value="">农业局</option>
                            <option value="">林业局</option>
                        </select>
                    </div>

                </div>
                <h3 style="color:#666666;text-align: center;">角色</h3>
                <select name="" id="" placeholder="点击选择">
                    <option value="">点击选择</option>
                    <option value="">农业局</option>
                    <option value="">林业局</option>
                </select>
            </form>
            <button id="search-btn">搜索</button>
        </div>
    </div>

    <!-- 底部tab页 -->
    <ul class="tab-content">
        <li class="active" onclick="changeTba(this,1)">通讯录</li>
        <li onclick="changeTba(this,2)">节点报表</li>
        <li onclick="changeTba(this,3)">项目报表</li>
        <li onclick="changeTba(this,4)">登录报表</li>
    </ul>

    <!--通讯录报表 -->
    <div class="tel-report">
        <div class="report-item">
            <h3>1</h3>
            <div>
                <div class="first-row">
                    <p class="title hidden-font">永泰县自然资源和规划局</p>
                    <p class="name">胡明</p>
                </div>
                <div class="second-row">
                    <p class="depart hidden-font">审批部门责任人</p>
                    <p class="tel">13809539969</p>
                </div>
            </div>
        </div>
    </div>
    <!-- 节点报表 -->
    <div class="node-report" hidden>
        <div class="report-item">
            <h3>1</h3>
            <div>
                <div class="first-row">
                    <p class="title hidden-font">赤锡郑侨文化公园1111111</p>
                    <p class="name">审核完成</p>
                </div>
                <div class="second-row">
                    <p class="depart hidden-font">永泰县住房和城乡建设局11111111</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 项目报表 -->
    <div class="project-report" hidden>
        <div class="report-item">
            <h3>1</h3>
            <div>
                <div class="first-row">
                    <p class="title hidden-font">永泰县自然资源和规划局</p>
                    <p class="name">胡明</p>
                </div>
                <div class="second-row">
                    <p class="depart hidden-font">审批部门责任人</p>
                    <p class="tel">13809539969</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 登录报表 -->
    <div class="login-report" hidden>
        <div class="report-item">
            <h3>1</h3>
            <div>
                <div class="first-row">
                    <p class="title hidden-font">谢曦航</p>
                    <p class="name">经办人</p>
                </div>
                <div class="second-row">
                    <p class="depart hidden-font">县重点工作攻坚指挥室</p>
                    <p class="tel">登录次数：137</p>
                </div>
            </div>
        </div>
    </div>



    <script src="js/flexible.js"></script>
    <script src="js/jquery-3.2.1.js"></script>
    <!-- VConsole手机调试 -->
    <script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
    <script>
        var vConsole = new VConsole();
        // 跳转项目报表详情
        $(".project-report .report-item").click(function () {
            window.location.href = "./projectReportDetail.html"
        });
        // 跳转查看登录报表详情
        $(".login-report .report-item").click(function () {
            window.location.href = "./loginReportDetail.html"
        });

        // 切换tab
        function changeTba(that, id) {
            $(".tab-content>li").removeClass("active");
            $(that).addClass('active')
            if (id == 1) {
                $(".tel-report").show(100)
                $(".node-report").hide(100)
                $(".project-report").hide(100)
                $(".login-report").hide(100)
            } else if (id == 2) {
                $(".tel-report").hide(100)
                $(".node-report").show(100)
                $(".project-report").hide(100)
                $(".login-report").hide(100)
            } else if (id == 3) {
                $(".tel-report").hide(100)
                $(".node-report").hide(100)
                $(".project-report").show(100)
                $(".login-report").hide(100)
            } else if (id == 4) {
                $(".tel-report").hide(100)
                $(".node-report").hide(100)
                $(".project-report").hide(100)
                $(".login-report").show(100)
            }
        }

        // 显示模态框
        $(".top-navigation .search").click(function () {
            $(".bottom-modal").fadeIn();
            $(".fades").fadeIn();
        });

        // 关闭模态框
        $(".fades").click(function () {
            closeModal();
        });

        // 关闭模态框function
        function closeModal() {
            $(".bottom-modal").fadeOut();
            $(".fades").fadeOut();
        }
        // 重置form表单
        $(".clearForm").click(function () {
            $(".forms").find('input[type=text],select,input[type=hidden]').each(function () {
                $(this).val('');

            });

        });

        // 提交表单
        $("#search-btn").click(function () {
            var data = $(".forms").serialize();
            console.log(data);
            closeModal();
        });
    </script>
</body>

</html>